<template>
    <div>
        <div class="home">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div v-for="(item, index) in imgArr" :key="index" class="swiper-slide"  ><img :src="imgUrl+item.image" alt=""></div>
                    
                </div>
    <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                
                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
                
                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div> -->
            </div>
        </div>
    </div>
</template>
<script>

import Swiper from 'swiper';
import NetWorkUtils from '../../apis/main'

export default {
    data(){
        return{
            imgUrl:NetWorkUtils.imgUrl,
            imgArr:[]
        }
    },
    mounted(){

// 网页加载时候的初始请求 
        NetWorkUtils.get('/banner/getList').then(
            res=>{
            this.imgArr=res.data

            }
        ).catch(err=>{
            console.log(err);
            
        })



        // 创建轮播图
        new Swiper ('.swiper-container', {
            loop: true,
            // 如果需要分页器
            pagination: '.swiper-pagination',
            // 如果需要前进后退按钮
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            // 如果需要滚动条
            // scrollbar: '.swiper-scrollbar',
        })        

    

    }
}
</script>

<style scoped>
    .swiper-container {
        width: 100%;
        position: relative;
        /* height:600px; */
        /* margin: 20px auto; */
    }
</style>

